{% extends "base.html" %}

{% block menuItems %}
  <div id="menuItemRight"> tilmeld </div>
  <div id="menuItemRight"> <a href="/about">Hvad er zentienz?</a> </div>
{% endblock %}

{% block javascript %}
  function checkPass(){
    //Store the password field objects into variables ...
    var pass1 = document.getElementById('password1');
    var pass2 = document.getElementById('password2');
   //Set the colors we will be using ...
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(pass1.value == pass2.value){
      //The passwords match. 
      //Set the color to the good color and inform
      //the user that they have entered the correct password 
      pass2.style.backgroundColor = goodColor;
   }else{
      //The passwords do not match.
      //Set the color to the bad color and
      //notify the user.
      pass2.style.backgroundColor = badColor;
   }
  }
{% endblock %}

{% block content %}
  <div id="content">
    <div id="center">  
      <form id=signUp method="post">
        <label for=firstName>Fornavn</label>
        <input id=firstName name=firstName required autofocus>
        <br>
        <label for=lastName>Efternavn</label>
        <input id=lastName name=lastName required>
        <br>
        <label for=email>Email</label>
        <input id=email name=email required type=email>
        <br>
        <label for=password1>Kode</label>
        <input id=password1 name=password1 required type=password>
        <br>
        <label for=password2>Gentag kode</label>
        <input id=password2 name=password2 required type=password onkeyup="checkPass(); return false;">
        <div id="center">  
          <button type=submit>Forts&aelig;t</button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}
